<template>
    <div>
        <!-- 第一行  返回按钮 -->
        <div class="back">
            <!-- $router.go(-1)  标识返回上一个路由页面  ==history.go -->
            <el-page-header @back="$router.go(-1)" content="上传餐厅信息">
            </el-page-header>
        </div>
        <!-- 第二行 表单 -->
        <div class="form" style="margin-top: 10px;margin-left: 10px;">
            <el-form :model="form" :rules="rules" ref="myForm">
                <!-- 校验必须设置提交校验 -->
                <el-row>
                    <el-col :span="16">

                        <el-form-item label="餐厅名称" :label-width="formLabelWidth" prop="title">
                            <el-input clearable v-model="form.title" placeholder="请输入餐厅名称"></el-input>
                        </el-form-item>
                        <el-form-item label="地区" :label-width="formLabelWidth" prop="categoryId">
                            <el-select clearable v-model="form.categoryId" placeholder="请选择城市">
                                <!-- el-option，下拉框中的每一个选项 -->
                                <el-option v-for="item in categories" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="应缴纳会费" :label-width="formLabelWidth" prop="money">
                            <el-input clearable v-model="money" placeholder="请输入应缴纳金额"></el-input>
                        </el-form-item> -->

                    </el-col>
                    <el-col :span="8">
                        <!-- 上传组件element -->
                        <el-form-item clearable label="封面" :label-width="formLabelWidth" prop="cover">
                            <!-- action:保存到的图片服务器地址 -->
                            <!-- :file-list="fileList" -->
                            <el-upload ref="upload" class="avatar-uploader"
                                action="http://121.4.83.32:7006/UploadControlle/upload" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 富文本编辑器  Tinymce -->
                <el-form-item label="正文" :label-width="formLabelWidth">
                    <Tinymce v-model="form.content" :height="300"></Tinymce>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" @click="toSave" style="float: right;">点击上传</el-button>
    </div>
</template>

<script>
import { get, post } from '@/utils/request'
import Tinymce from '../../components/Tinymce'

export default {
    //局部注册组件
    components: {
        Tinymce
    },
    data() {
        return {
            // 图片保存到的服务器地址
            fileList: [],
            // 表单对象
            form: {},
            // 表单域标签宽度
            formLabelWidth: '100px',
            // 栏目数组
            categories: [],
            // 图片上传组件的图片路径、
            imageUrl: '',
            rules: {
                title: [
                    { required: true, message: '请输入餐厅名称', trigger: 'blur' }
                    //blur：失焦，当我点击到模态框其他位置时触发
                ],

                categoryId: [
                    { required: true, message: '请选择城市', trigger: 'change' }
                ],
                // cover: [
                //     { required: true, message: '请上传图片', trigger: 'blur' }
                // ],
            }
        }
    },
    methods: {
        //获取城市分类
        async getCategory() {
            let res = await get('/category/findAll');
            console.log(res, '获取分类');
            this.categories = res.data
        },
        //图片上传成功的回调函数
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            //上传图片成功后 将图片地址设置给表单对象cover属性
            this.form.cover = res.data;
        },
        // 在图片上传之前触发的函数
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 提交校验
        async toSave() {
            this.$refs['myForm'].validate(async (valid) => {
                if (valid) {
                    // console.log(this.form, 'qqqpwoeop')
                    // this.form.thumpUp = this.money;
                    console.log(this.form.thumpUp, 'aaaa')
                    console.log(this.form, 'bbbb')
                    let res = await post('/article/saveOrUpdate', this.form)
                        this.$notify({
                            title: '点击上传',
                            type: 'success',
                            message: res.message
                        });
                    this.$router.push('/info/list')
                } else {
                    return false
                }
            })
        }
    },
    created() {
        this.getCategory();
        this.form = { ...this.$route.query };
        this.imageUrl = this.form.cover;
    }
}
</script>